<template>
  <div>
<h1>欢迎光临，vue开发的收银系统水果店</h1>
<p>苹果10￥/斤，折扣8折</p>
<p>请输入购买斤数：  <input type="text" v-model.number="num"></p>

<button @click="sumFn">结账买单</button>
<br><br>
<div>
  账单
  <span>总价：￥{{total}} </span> &nbsp;&nbsp;
  <span>折后价：￥{{discount}} </span>&nbsp;&nbsp;
  <span>省了：{{save}}元</span>
</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      num: '',
      total: '',
      discount: '',
      save: ''
    }
  },

  created () {

  },

  methods: {
    sumFn () {
      this.total = 10 * this.num
      this.discount = 10 * 0.8 * this.num
      this.save = this.total - this.discount
    }
  }
}
</script>

<style scoped lang='less'>
span {
  border: 1px solid pink;
}
</style>
